function $(selector) {
    return document.querySelector(selector)
}

function $$(selector) {
    return document.querySelectorAll(selector)
}

let chessboardDom = $('.chessboard'),
    whichOne = 'white',
    pointArr = [],
    isGame = false;



function initChessboard() {
    var tr = '';
    for (var i = 0; i < 14; i++) {
        tr += '<tr>'
        for (var j = 0; j < 14; j++) {
            tr += `
            <td data-row="${i}" data-line="${j}" ></td>`

        }
        tr += '</tr>'
    }
    chessboardDom.innerHTML = tr
}

//判断是否存在
function exist(point) {
    return pointArr.includes (item => item.x === point.x && item.y === point.y)
}

// 判断游戏是否结束
function check() {
    for (var i = 0; i < pointArr.length; i++){
        var curChess = pointArr[i];
        var chess2, chess3, chess4, chess5;
         // 检查有没有横着的 5 个颜色一样的棋子
         chess2 = pointArr.find(function(item){
            return curChess.x === item.x + 1 && curChess.y === item.y && curChess.c === item.c;
        })
        chess3 = pointArr.find(function(item){
            return curChess.x === item.x + 2 && curChess.y === item.y && curChess.c === item.c;
        })
        chess4 = pointArr.find(function(item){
            return curChess.x === item.x + 3 && curChess.y === item.y && curChess.c === item.c;
        })
        chess5 = pointArr.find(function(item){
            return curChess.x === item.x + 4 && curChess.y === item.y && curChess.c === item.c;
        })
        if(chess2 && chess3 && chess4 && chess5){
            // 进入此 if，说明游戏结束
            end(curChess, chess2, chess3, chess4, chess5);
        }


        // 检查有没有竖着的 5 个颜色一样的棋子
        chess2 = pointArr.find(function(item){
            return curChess.x === item.x && curChess.y === item.y + 1 && curChess.c === item.c;
        })
        chess3 = pointArr.find(function(item){
            return curChess.x === item.x && curChess.y === item.y + 2 && curChess.c === item.c;
        })
        chess4 = pointArr.find(function(item){
            return curChess.x === item.x && curChess.y === item.y + 3 && curChess.c === item.c;
        })
        chess5 = pointArr.find(function(item){
            return curChess.x === item.x && curChess.y === item.y + 4 && curChess.c === item.c;
        })
        if(chess2 && chess3 && chess4 && chess5){
            // 进入此 if，说明游戏结束
            end(curChess, chess2, chess3, chess4, chess5);
        }

        // 检查有没有斜着的 5 个颜色一样的棋子
        chess2 = pointArr.find(function(item){
            return curChess.x === item.x + 1 && curChess.y === item.y + 1&& curChess.c === item.c;
        })
        chess3 = pointArr.find(function(item){
            return curChess.x === item.x + 2 && curChess.y === item.y + 2 && curChess.c === item.c;
        })
        chess4 = pointArr.find(function(item){
            return curChess.x === item.x + 3 && curChess.y === item.y + 3 && curChess.c === item.c;
        })
        chess5 = pointArr.find(function(item){
            return curChess.x === item.x + 4 && curChess.y === item.y + 4 && curChess.c === item.c;
        })
        if(chess2 && chess3 && chess4 && chess5){
            // 进入此 if，说明游戏结束
            end(curChess, chess2, chess3, chess4, chess5);
        }

        // 检查有没有斜着的 5 个颜色一样的棋子
        chess2 = pointArr.find(function(item){
            return curChess.x === item.x - 1 && curChess.y === item.y + 1&& curChess.c === item.c;
        })
        chess3 = pointArr.find(function(item){
            return curChess.x === item.x - 2 && curChess.y === item.y + 2 && curChess.c === item.c;
        })
        chess4 = pointArr.find(function(item){
            return curChess.x === item.x - 3 && curChess.y === item.y + 3 && curChess.c === item.c;
        })
        chess5 = pointArr.find(function(item){
            return curChess.x === item.x - 4 && curChess.y === item.y + 4 && curChess.c === item.c;
        })
        if(chess2 && chess3 && chess4 && chess5){
            // 进入此 if，说明游戏结束
            end(curChess, chess2, chess3, chess4, chess5);
        }
    }
}

function end() {
    if(!isGame){
        isGame = true; // 代表游戏结束

        // 1. 把所有的棋子标记出来
        for(var i=0;i<pointArr.length;i++){
            $(`div[data-row='${pointArr[i].y}'][data-line='${pointArr[i].x}']`).innerHTML = i + 1;
        }

        // 2. 把获胜的棋子加上一个红色阴影
        for(var i=0;i<arguments.length;i++){
            $(`div[data-row='${arguments[i].y}'][data-line='${arguments[i].x}']`).classList.add('win');
        }
    }
}

// 绘制棋子
function chessMove(chessPoint) {
    if (!isGame && !exist(chessPoint)) {
        pointArr.push(chessPoint)

        var newChess = `<div class="chess ${chessPoint.c}" data-row="${chessPoint.y}" data-line="${chessPoint.x}"></div>`;

        if (chessPoint.x < 14 && chessPoint.y < 14) {
            var tdPos = $(`td[data-row='${chessPoint.y}'][data-line='${chessPoint.x}']`);
            tdPos.innerHTML +=  newChess
        }
          // x 等于 14，说明是最右侧那条线
          if(chessPoint.x === 14 && chessPoint.y < 14){
            var tdPos = $(`td[data-row='${chessPoint.y}'][data-line='13']`);
            tdPos.innerHTML += newChess;
            tdPos.lastChild.style.left = '50%';
        }

        // y 等于 14，说明是最下侧那条线
        if(chessPoint.x < 14 && chessPoint.y === 14){
            var tdPos = $(`td[data-row='13'][data-line='${chessPoint.x}']`);
            tdPos.innerHTML += newChess;
            tdPos.lastChild.style.top = '50%';
        }

        // x 和 y 均等于 14，说明是最右下角的那个 td
        if(chessPoint.x === 14 && chessPoint.y === 14){
            var tdPos = $(`td[data-row='13'][data-line='13']`);
            tdPos.innerHTML += newChess;
            tdPos.lastChild.style.top = '50%';
            tdPos.lastChild.style.left = '50%';
        }

        whichOne = whichOne === 'white' ? 'black' : 'white'; // 切换棋子的颜色

    }
    check(); // 核对游戏是否结束
}

function bindEvent() {
    chessboardDom.onclick = function (e) {
        if (!isGame) {
            var temp = Object.assign({}, e.target.dataset)
            if (e.target.tagName === 'TD') {
                var tdw = chessboardDom.clientWidth * 0.92 / 14
                var positionX = e.offsetX > tdw / 2
                var positionY = e.offsetY > tdw / 2

                var chessPoint = {
                    x: positionX ? parseInt(temp.line) + 1 : parseInt(temp.line),
                    y: positionY ? parseInt(temp.row) + 1 : parseInt(temp.row),
                    c: whichOne
                }
                
                chessMove(chessPoint);
                
            }
        } else {
            // 游戏结束
            if (window.confirm('是否重新一局')) {
                initChessboard()
                isGame = false
                pointArr = []
            }
        }

    }
}





function main() {
    initChessboard();
    bindEvent()
}

main()